import React from 'react';
import { Avatar, Card } from 'antd';
import { RobotOutlined } from '@ant-design/icons';

const TypingIndicator = () => {
  return (
    <div 
      className="message-bubble assistant"
      style={{
        display: 'flex',
        alignItems: 'flex-start',
        gap: '8px',
        marginBottom: '16px'
      }}
    >
      {/* 头像 */}
      <Avatar 
        icon={<RobotOutlined />}
        style={{
          backgroundColor: '#52c41a',
          flexShrink: 0
        }}
      />

      {/* 打字指示器 */}
      <Card
        size="small"
        style={{
          backgroundColor: '#fff',
          border: '1px solid #d9d9d9',
          borderRadius: '12px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
        }}
        bodyStyle={{ padding: '12px 16px' }}
      >
        <div className="typing-indicator">
          <div className="typing-dot"></div>
          <div className="typing-dot"></div>
          <div className="typing-dot"></div>
          <span style={{ marginLeft: '8px', color: '#8c8c8c', fontSize: '14px' }}>
            正在思考...
          </span>
        </div>
      </Card>
    </div>
  );
};

export default TypingIndicator;
